<template>
	<view class="newGoods">
		<!-- 头部区域 -->
		<view class="navHead">
			<view class="navHeadItem">
				<view class="navHeadIcon">
					<image class="iconImage" src="http://localhost:3000/static/返回.png" @click="returnHome"></image>
				</view>
				<view class="navHeadtitle">
					<view :class="['itemName',i === active ? 'active' : '']" v-for="(item,i) in  newGoods" :key="i" @click="activeIndex(i)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品列表区域 -->
		<view class="goodsList">
			<view class="goodsItem" v-for="(item,i) in goodsList" :key="i" @click="goGoodsDetail">
				<view class="goodsImage">
					<image :src="item.url" mode=""></image>
				</view>
				<view class="goodsInfo">
					<view class="title">{{item.uname}}</view>
					<view class="info">{{item.intro}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [], //商品列表数组
				newGoods: ["本期新品", "上期新品"],
				active: 0,
			};
		},
		onLoad() {
			this.getGoodsList()
		},
		methods: {
			// 返回首页
			returnHome() {
				uni.navigateBack()
			},
			// 点击切换 active
			activeIndex(i) {
				this.active = i
				console.log(this.active)
			},
			// 请求本期新品数据
			async getGoodsList() {
				const {data: res } = await uni.$http.get('/new')
				this.goodsList = res.data
			},
			// 跳转商品详情页面
			goGoodsDetail(){
				uni.redirectTo({
					url:'/subpkg/goods_detail/goods_detail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.newGoods {
		padding: 0 20rpx;
		// 头部区域
		.navHead {

			// height: 130rpx;
			.navHeadItem {
				display: flex;
				padding-top: 90rpx;

				.navHeadIcon {
					padding-top: 4rpx;
					box-sizing: border-box;

					.iconImage {
						width: 16rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}

				.navHeadtitle {
					width: 100%;
					display: flex;
					justify-content: space-between;
					.itemName {
						padding-bottom: 24rpx;
						// 激活项的样式
						&.active {
							position: relative;
							// 渲染激活项下方的红色指示边线
							&::after {
								content: '';
								display: block;
								width: 129rpx;
								height: 1rpx;
								background-color: #000065;
								position: absolute;
								left: 0;
								bottom: 10rpx;
							}
						}
						
					}
				}
			}
		}
		// 商品列表区域
		.goodsList {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.goodsItem {
				.goodsImage {
					image {
						width: 345rpx;
						height: 198rpx;
						margin-bottom: 20rpx;
					}
				}

				.goodsInfo {
					margin-left: 60rpx;
					font-size: 22rpx;

					.title {
						font-size: 26rpx;
					}

					.info {
						margin: 20rpx 0;
						color: #8a94a1;
					}

					.price {
						color: red;
					}
				}
			}
		}
	}
</style>
